<template>
  <!-- 收货地址 -->
  <van-contact-card
    type="edit"
    :tel="address.tel"
    :name="`${address.name}—${address.region_text}`"
    @click="AddressChange"
    v-if="address"
  />
  <van-contact-card type="add" v-else @click="AddressAdd" />
  <!-- 订单列表 -->
  <van-card
    v-for="(item, index) in list"
    :key="index"
    :num="item.nums"
    :thumb="item.product.thumbs_text"
    @click-thumb="toProductInfo(item.proid)"
  >
    <!-- 卡片插槽部分 -->
    <template #title>
      <div class="title">{{ item.product.name }}</div>
    </template>

    <template #desc v-if="item.attrs && item.attrs.length > 0">
      <van-tag
        v-for="(value, key) in item.attrs"
        :key="key"
        class="tag"
        round
        plain
        type="primary"
        >{{ value.value }}</van-tag
      >
    </template>
    <template #desc v-else>
      <van-tag class="tag" round plain type="warning">无规格数据</van-tag>
      <!-- 单价 -->
    </template>
    <template #tags>
      <div>单价：￥{{ item.price }}</div>
    </template>
    <template #price>
      <div>合计：￥{{ item.total }}</div>
    </template>
  </van-card>

  <van-cell
    title="支付方式"
    :value="PayActive.text"
    is-link
    @click="PayShow = true"
  />
  <!-- 优惠券单元格 -->
  <van-coupon-cell
    :coupons="CouponList"
    :chosen-coupon="CouponActive"
    @click="CouponShouw = true"
  />

  <!--订单备注 -->
  <van-field
    v-model="remark"
    rows="5"
    autosize
    label="订单备注"
    type="textarea"
    maxlength="120"
    placeholder="请输入订单备注"
    show-word-limit
  />
  <!-- 提交动作栏 -->
  <van-submit-bar
    text-align="left"
    :price="total"
    button-text="确认支付"
    @submit="submit"
  />

  <!-- 支付方式弹出框 -->
  <van-popup v-model:show="PayShow" position="bottom">
    <van-picker
      title="支付方式"
      :columns="PayList"
      @confirm="Confirm"
      @cancel="PayShow = false"
    />
  </van-popup>
  <!-- 优惠券列表 -->
  <van-popup
    v-model:show="CouponShouw"
    round
    position="bottom"
    style="height: 90%; padding-top: 4px"
  >
    <van-coupon-list
      :coupons="CouponList"
      :chosen-coupon="CouponActive"
      @change="ChangeCoupon"
    />
  </van-popup>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount, ref } from "vue";

const { proxy } = getCurrentInstance();

let cartids = proxy.$route.query.cartids ? proxy.$route.query.cartids : "0";
let list = ref([]); //购物车商品列表
let address = ref(null); //收货地址

//支付方式
let PayShow = ref(false);
let PayActive = ref({ text: "余额支付", value: "money" });
let PayList = ref([
  { text: "余额支付", value: "money" },
  { text: "微信支付", value: "wx" },
  { text: "支付宝", value: "afb" },
]);

//优惠券
const CouponList = ref([]);
const CouponShouw = ref(false);
const CouponActive = ref(-1);

//备注
const remark = ref();

onBeforeMount(() => {
  CartInfo();
  AddressInfo();
  CouponInfo();
});

//合计的价格
let total = computed(() => {
  var total = 0;

  list.value.map((item) => (total += parseFloat(item.total)));
  if (CouponActive.value != -1) {
    //获取折扣率
    var rate = CouponList.value[CouponActive.value].rate;
    total = total * rate;
  }

  return parseFloat(total * 100);
});

//商品列表
const CartInfo = async () => {
  // 组装数据
  var params = {
    busid: proxy.$business.value.id,
    cartids,
  };

  var result = await proxy.$POST({
    url: "/cart/index",
    params,
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }

  result.data.map((item) => (item.attrs = JSON.parse(item.attrs)));

  list.value = result.data;
};

//获取默认地址
const AddressInfo = async () => {
  // 先获取cookies中的地址
  var cached = proxy.$cookies.get("address")
    ? proxy.$cookies.get("address")
    : null;
  if (cached) {
    address.value = cached;
  } else {
    var result = await proxy.$POST({
      url: "/address/selected",
      params: { busid: proxy.$business.value.id },
    });

    if (result.code == 0) {
      return false;
    }
    address.value = result.data;
  }
};

//切换收货地址
const AddressChange = () => {
  proxy.$router.push({ path: "/address/index", query: { action: "selected" } });
};

//添加收货地址
const AddressAdd = () => {
  proxy.$router.push("/address/add");
};

//支付方式选择
const Confirm = ({ selectedOptions }) => {
  PayShow.value = false;
  //切换支付方式
  PayActive.value = selectedOptions[0];
};

//优惠券列表
const CouponInfo = async () => {
  var result = await proxy.$POST({
    url: "/business/coupon",
    params: { busid: proxy.$business.value.id },
  });

  if (result.code && result.data.list.length > 0) {
    var coupons = [];

    for (var item of result.data.list) {
      if (item.status == 1) {
        coupons.push({
          id: item.id,
          condition: item.coupon.status_text,
          rate: item.coupon.rate,
          name: item.coupon.title,
          value: 2000,
          startAt: item.coupon.createtime,
          endAt: item.coupon.endtime,
          valueDesc: `${item.coupon.rate * 100}`,
          unitDesc: "折",
        });
      }
    }

    CouponList.value = coupons;
  }
};

//切换优惠券
const ChangeCoupon = (index) => {
  CouponActive.value = index;
  CouponShouw.value = false;
  if (index != -1) {
    //计算
    var Total = total.value / 100;
    var rate = CouponList.value[index].rate;
    var price = Total * rate;
    var CouponPrice = Total - price;
    CouponPrice = parseFloat(CouponPrice * 100).toFixed(2);
    CouponList.value[index].value = CouponPrice;
  }
};

//结算
const submit = async () => {
  var params = {
    busid: proxy.$business.value.id,
    pay: PayActive.value.value,
    cartids: cartids,
    addrid: address.value.id,
    remark: remark.value ? remark.value : "",
  };
  if (CouponActive.value != -1) {
    params.couponid = CouponList.value[CouponActive.value].id;
  }

  proxy
    .$confirm({
      message: "是否确认支付",
    })
    .then(async () => {
      var result = await proxy.$POST({
        url: "/order/add",
        params,
      });
      if (result.code == 0) {
        proxy.$fail(result.msg);
        return false;
      } else if (result.code == 1) {
        proxy.$success({
          message:result.msg,
          onClose:()=>{
            proxy.$router.go(-1)
          }
        });
        return false;
      }
    })
    .catch(() => {});
};
</script>